<!-- 逻辑代码块-->
<script setup lang="ts">
import { ref } from 'vue'

const imgUrl = ref(
  'https://picx.zhimg.com/80/v2-38d15bbf0d928e0ed6c50cda6c3e7a69_720w.webp?source=1def8aca',
)

const changeImg = () => {
  imgUrl.value = 'https://pic2.zhimg.com/v2-febc9228d18886a29c68a66536279dfb_r.jpg?source=1940ef5c'
}

const skyBule = ref(true)
</script>

<!-- 结构块:-->
<template>
  <img @click="changeImg" v-bind:src="imgUrl" alt="" />
  <!-- v-bind可以简写为： -->
  <img :src="imgUrl" alt="" />

  <div @click="skyBule = !skyBule" class="box1" :class="{ skyBule: skyBule }"></div>
</template>

<!-- 样式块-->
<style scoped>
img {
  width: 300px;
}

.box1 {
  width: 100px;
  height: 100px;
  border: 1px, black, solid;
}
.skyBule {
  background-color: skyblue;
}
</style>
